<!doctype html>
<html>
<head>
	<title>^js-42-田</title>
	<meta charset="UTF-8"/>
	<style>
	
	*{
		margin:0;
		padding:0;
	}
		a{
			text-decoration:none;/*去掉a标签超链接的下划线*/
		}
		ul li{
			list-style:none;/*去掉ul列表前面的点*/
			width:100%;
			height:110px;
			margin-bottom:2px;
			background-color:#bbb;
			line-height:55px;
			text-align:center;
			cursor:pointer;
		}
		div{
			width:30px;
			height:1200px;
			float:right;
		}
		.on{
			background-color:pink;
		}
		a{//锚点
			width:100%;
			height:12px;
			line-height:12px;
			text-align:center;
		}
	</style>
</head>
<body>
	<div>
		<ul>
			<li class="on" id="zhi">直播</li>
			<li>动画</li>
			<li>番剧</li>
			<li>团剧</li>
			<li>音乐</li>
			<li>舞蹈</li>
			<li>游戏</li>
			<li>科技</li>
			<li>生活</li>
			<li>鬼畜</li>
			<a title="返回顶部" href="#zhi">返回顶部</a>
		</ul>
	</div>
	<script>
		var oLi=document.querySelectorAll("li");
			alert(oLi.length);
	</script>
</body>

</html>